<template>
  <view class="homeBanner">
    <swiper
      class="swiper"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      circular
    >
      <swiper-item v-for="(item, i) in imgList" :key="i">
        <view class="swiper-item">
          <view v-if="item.badge" class="homeBanner-badge">
            {{ item.badge }}
          </view>
          <view class="homeBanner-content">
            <image
              @tap="imgClick(item)"
              class="homeBanner-img"
              :src="item.img"
            />
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import global from '@/common/global';
const img_url = global.BASE_IMG;
export default {
  name: 'homeBanner',

  data() {
    return {
      indicatorDots: false,
      autoplay: true,
      interval: 4000,
      duration: 1000,
    };
  },

  props: {
    imgList: {
      type: Array,
      default: () => [
        // #ifdef MP-ALIPAY
        {
          img: img_url + 's-home-banner.png',

          evt() {
            this.$Router.push('/pagesC/promote/promote')
          },

          // badge: '最高减5元',
        },
        // #endif
        {
          img: img_url+ 'banner_mingyi@3x.png',
          evt() {
            this.$Router.push('/pagesC/MDT/deptList')
          },
        }
      ],
    },
  },

  methods: {
    imgClick(item) {
      const { evt } = item;
      evt && evt.call(this.$parent, item);
    },
  },
};
</script>

<style lang="scss" scoped>
.homeBanner {
  --badgeH: 20upx;
  background-color: #fff;
  padding: 0 20upx;
  .swiper {
    height: 170upx;
    .swiper-item {
      height: 100%;
      width: 100%;
      position: relative;
      .homeBanner-content {
        width: 100%;
        height: calc(100% - var(--badgeH));
        margin-top: var(--badgeH);
        .homeBanner-img {
          width: 100%;
          height: 100%;
        }
      }

      .homeBanner-badge {
        position: absolute;
        right: 0;
        top: -20upx;
        font-size: 18upx;
        background-color: #fff;
        border-radius: 20upx;
        padding: 0 10upx;
        border: 2upx solid #fa541c;
        color: #fa541c;
      }
    }
  }
}
</style>
